<template>
	<view>
		<view class="" style="margin:20px 0 0 20px;display: flex;align-items: center;" v-if="!this.isFirst">
			<view style="margin-right: 10px;">
				{{$t("payee.type")}}:
			</view>
			<u-radio-group v-model="valueSelect">
				<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.value">
					{{item.name}}
				</u-radio>
			</u-radio-group>
		</view>


		<form @submit="formSubmit" report-submit='true'>
			<view class='addAddress pad30'>
				<view class='list borRadius14' v-if="isFirst || valueSelect==1">
					<view class="" style="padding-top: 15px;">

						<span style="color: red;">*</span> USDT-TRC
					</view>
					<view class='item acea-row row-between-wrapper' style="border: none;">

						<view class='name'>{{$t("payee.collection-network")}}:</view>
						<input type='text'  placeholder-style="color:#ccc;font-size: 12px;" name='network'
							v-model="userAddress.network" placeholder-class='placeholder' style="width: 50%;" :placeholder=inputNetwork></input>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>{{$t("payee.wallet-address")}}:</view>
						<input type='text'  placeholder-style="color:#ccc;font-size: 12px;" name="walletAddress" :placeholder=inputAddress
							v-model='userAddress.walletAddress' placeholder-class='placeholder' style="width: 60%;"></input>
					</view>

				</view>
				<!-- <view class='default acea-row row-middle borRadius14'>
					<checkbox-group @change='ChangeIsDefault'>
						<checkbox :checked="userAddress.isDefault" />设置为默认地址
					</checkbox-group>
				</view> -->

				<view class="upload_box" v-if=" isFirst || valueSelect==1">
					<view class="upload_tit">{{$t("payee.qrcode-trc-false-tips")}}:</view>
					<!-- <u-upload :action="action" :file-list="fileList"></u-upload> -->

					<view class="" @click="look" style="width:80px;height:80px;margin: 10px 0;">


						<u-image width='100%' height='100%' :src="this.userAddress.qrcodeUrl"></u-image>
					</view>


					<button @click="upload" type="primary" size="mini">{{$t("public.upload-image")}}</button>
					<!-- style="width: 100px;height: 35px;margin-top: 10px;" -->
				</view>


				<!-- -----------------------   ERC ----------------------------------------  -->

				<view class='list borRadius14' v-if="isFirst || valueSelect==2 ">
					<view class="" style="padding-top: 15px;">
						<span style="color: red;">*</span>USDT-ERC
					</view>
					<view class='item acea-row row-between-wrapper' style="border: none;">
						<view class='name'>{{$t("payee.collection-network")}}:</view>
						<input type='text'  placeholder-style="color:#ccc;font-size: 12px;" name='network' style="width: 50%;"  :placeholder=inputNetwork
							v-model="ERCInfo.network" placeholder-class='placeholder'></input>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>{{$t("payee.wallet-address")}}</view>
						<input type='text'   placeholder-style="color:#ccc;font-size: 12px;" name="walletAddress"  :placeholder=inputAddress
							v-model='ERCInfo.walletAddress' placeholder-class='placeholder' style="width: 60%;"></input>
					</view>

				</view>
				<!-- <view class='default acea-row row-middle borRadius14'>
					<checkbox-group @change='ChangeIsDefault'>
						<checkbox :checked="userAddress.isDefault" />设置为默认地址
					</checkbox-group>
				</view> -->

				<view class="upload_box" v-if=" isFirst || valueSelect==2">
					<view class="upload_tit">{{$t("payee.qrcode-erc-false-tips")}}:</view>
					<view class="upload_box">
						<view class="" @click="look1" style="width:80px;height:80px;margin: 10px 0;">
							<u-image width='100%' height='100%' :src="this.ERCInfo.qrcodeUrl"></u-image>
						</view>
						<button @click="uploadTwo" type="primary" size="mini">{{$t("public.upload-image")}}</button>
						<!-- style="width: 100px;height: 35px;margin-top: 10px;" -->
					</view>
				</view>

				<button class='keepBnt bg-color' form-type="submit">{{$t("payee.save")}}</button>

			</view>
		</form>

	</view>
</template>

<script>
	import {
		receivingAddress,
		editAddress,
		getAddressDetail,
		getAddress
	} from '@/api/new.js';
	import {
		getCity
	} from '@/api/api.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	import home from '@/components/home';
	// import city from '@/utils/cityData';
	let app = getApp();
	export default {
		components: {
			// #ifdef MP
			authorize,
			// #endif
			home
		},
		data() {
			return {
				
				inputNetwork: this.$t("payee.network-tips"),
				inputAddress: this.$t("payee.wallet-tips"),
				andSelect: false,
				valueSelect: 1,
				list: [{
						name: 'USDT-TRC',
						value: 1
					},
					{
						name: 'USDT-ERC',
						value: 2
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: 'orange',
				// http://192.168.3.41:8080/crmebimage/userAuthCollection2023/12/29/28afafaaacd4488a9d3152ed05e784a8i1vvz1otch.jpg
				src: '',
				userAddress: {
					walletAddress: "",
					network: "",
					qrcodeUrl: '',
				},
				ERCInfo: {
					walletAddress: "",
					network: "",
					qrcodeUrl: "",

				},
				FormArr: [],
				fileList: [],
				action: 'http://www.example.com/upload',
				isFirst: false
			};
		},
		computed: mapGetters(['isLogin']),
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV) {
						this.getUserAddress();
						this.getCityList();
					}
				},
				deep: true
			}
		},
		onLoad(options) {
			
			if (this.isLogin) {
				this.preOrderNo = options.preOrderNo || 0;
				this.id = options.id || 0;
				uni.setNavigationBarTitle({
					title: options.id ? this.$t('payee.collection-update') : this.$t('payee.collection-add')
				})
				this.getUserAddress();

			} else {
				toLogin();
			}


			this.getData()

		},
		onShow: function() {
			uni.setNavigationBarTitle({
					title:this.$t('payee.collection-add')
				})
		},
		methods: {
			radioChange(e) {
				this.valueSelect = e
				let data = {
					walletAddress: "",
					network: "",
					qrcodeUrl: '',
				}
				this.isFirst = false

				if (e == 1) {

					this.userAddress = data

				} else {
					this.ERCInfo = data
				}
				console.log(this.valueSelect, '???');
			},
			getData() {
				getAddress().then(res => {
					// 大于等于 1 ,表示不是第一次添加地址,可以 选填地址了
					//this.isFirst 为 true , 选填状态
					this.isFirst = res.data != null && res.data.length > 0 ? false : true

					//区分选填的 判空
					this.andSelect = res.data != null && res.data.length > 0 ? true : false
					console.log(this.isFirst, 'this.isFirst');
				})
			},
			look() {
				let that = this
				if (this.userAddress.qrcodeUrl == '') {
					
					return that.$util.Tips({
						title: this.$t('payee.qrcode-trc-false-tips')
					});

				} else {
					let imgsArray = [];
					imgsArray[0] = this.userAddress.qrcodeUrl;
					uni.previewImage({
						urls: imgsArray,
						current: 0

					});
				}

			},
			look1() {
				let that = this
				if (this.ERCInfo.qrcodeUrl == '') {
					return that.$util.Tips({
						title: this.$t('payee.qrcode-erc-false-tips')
					});

				} else {
					let imgsArray = [];
					imgsArray[0] = that.ERCInfo.qrcodeUrl;
					uni.previewImage({
						urls: imgsArray,
						current: 0

					});
				}

			},
			upload() {
				let that = this;

				that.$util.uploadImageOne({
					url: 'userAuthCollectionUpload',
					name: 'multipart',
					model: "maintain",
					pid: 0
				}, function(res) {
					
					console.log(res, '!!!!!');
					that.userAddress.qrcodeUrl = res.data.url
					this.src = res.data.url

				})		
			},

			uploadTwo() {
				let that = this;

				that.$util.uploadImageOne({
					url: 'userAuthCollectionUpload',
					name: 'multipart',
					model: "maintain",
					pid: 0
				}, function(res) {
					// that.newAvatar = res.data.url;
					console.log(res, '!!!!!');
					that.ERCInfo.qrcodeUrl = res.data.url

				})
			},

			toggleTab(str) {
				this.$refs[str].show();
			},
			onConfirm(val) {
				this.region = val.checkArr[0] + '-' + val.checkArr[1] + '-' + val.checkArr[2];
			},
			getUserAddress: function() {
				if (!this.id) return false;
				let that = this;
				getAddressDetail(this.id).then(res => {
					let region = [res.data.province, res.data.city, res.data.district];
					that.$set(that, 'userAddress', res.data);
					that.$set(that, 'region', region);
					that.city_id = res.data.cityId
				});
			},
			/**
			 * 提交用户添加地址
			 * 
			 */
			formSubmit: function(e) {
				let that = this
				// value = e.detail.value;
				// console.log(e ,'value');
				if (!this.userAddress.walletAddress || !this.userAddress.network || !this.userAddress.qrcodeUrl) {
					this.TRCmust = true
				} else {
					this.TRCmust = false
				}
				if (!this.ERCInfo.walletAddress || !this.ERCInfo.network || !this.ERCInfo.qrcodeUrl) {
					this.ERCmust = true

				} else {
					this.ERCmust = false
				}

				// andSelect 为 true 选填状态
				if (that.andSelect) {
					if (that.valueSelect == 1) {
						//TRC--选填
						if (that.TRCmust) {
							return that.$util.Tips({
								title: this.$t("payee.save-trc-false-tips")
							});
						} else {
							//走接口
							that.FormArr = [that.userAddress]
						}
					} else {
						//ERC--选填
						if (that.ERCmust) {
							return that.$util.Tips({
								title: this.$t("payee.save-erc-false-tips")
							});
						} else {
							//走接口
							that.FormArr = [that.ERCInfo]
						}

					}
				} else {
					// 刚进来 必填
					that.FormArr = [that.userAddress, that.ERCInfo]
					console.log(that.FormArr, 'arr');


					//全填
					// if (!this.userAddress.walletAddress || !this.userAddress.network || !this.userAddress.qrcodeUrl) {
					// 	this.TRCmust = true
					// } else {
					// 	this.TRCmust = false
					// }
					// if (!this.ERCInfo.walletAddress || !this.ERCInfo.network || !this.ERCInfo.qrcodeUrl) {
					// 	this.ERCmust = true

					// } else {
					// 	this.ERCmust = false
					// }


					if (that.TRCmust) {
						return that.$util.Tips({
							title: this.$t("payee.save-trc-false-tips")
						});
					}
					if (that.ERCmust) {
						return that.$util.Tips({
							title: this.$t("payee.save-erc-false-tips")
						});
					}

				}

				uni.showLoading({
					title: this.$t('address.saving'),
					mask: true
				})
				receivingAddress(that.FormArr).then(res => {
					console.log(res, '成功了保存了');
					if (res.data.code == 200) {
						that.$util.Tips({
							title: that.$t('address.add-done-tips')
						});
						setTimeout(() => {
							uni.navigateBack(-1)
						}, 1500)
					}
				}).catch(err => {
					return that.$util.Tips({
						title: err
					});
				})



				// if (!value.network) return that.$util.Tips({
				// 	title: '请填写收款网络'
				// });
				// if (!value.walletAddress) return that.$util.Tips({
				// 	title: '请输入钱包地址'
				// });
				// value.id = that.id;

				// value.isDefault = that.userAddress.isDefault;
				// value.qrcodeUrl = that.userAddress.qrcodeUrl

				// uni.showLoading({
				// 	title: '保存中',
				// 	mask: true
				// })
				// receivingAddress(value).then(res => {
				// 	console.log(res, 'res_address');
				// 	if (res.data.code == 200) {
				// 		that.$util.Tips({
				// 			title: res.data.message
				// 		});
				// 		setTimeout(() => {
				// 			uni.navigateBack()
				// 		}, 1500)
				// 	}
				// }).catch(err => {
				// 	return that.$util.Tips({
				// 		title: err
				// 	});
				// })


				// editAddress(value).then(res => {
				// 	if (that.id)
				// 		that.$util.Tips({
				// 			title: '修改成功',
				// 			icon: 'success'
				// 		});
				// 	else
				// 		that.$util.Tips({
				// 			title: '添加成功',
				// 			icon: 'success'
				// 		});
				// 	setTimeout(function() {
				// 		if (that.preOrderNo > 0) {
				// 			uni.redirectTo({
				// 				url: '/pages/users/order_confirm/index?preOrderNo=' + that
				// 					.preOrderNo + '&addressId=' + (that.id ? that.id : res.data
				// 						.id)
				// 			})
				// 		} else {
				// 			// #ifdef H5
				// 			return history.back();
				// 			// #endif
				// 			// #ifndef H5
				// 			return uni.navigateBack({
				// 				delta: 1,
				// 			})
				// 			// #endif
				// 		}
				// 	}, 1000);
				// }).catch(err => {
				// 	return that.$util.Tips({
				// 		title: err
				// 	});
				// })
			},
			ChangeIsDefault: function(e) {
				this.$set(this.userAddress, 'isDefault', !this.userAddress.isDefault);
			}
		}
	}
</script>

<style scoped lang="scss">
	.upload_box {
		margin: 20px 0 0 10px;

		.upload_tit {
			font-size: 16px;
			font-weight: bold;
		}
	}

	.addAddress {
		padding-top: 20rpx;
	}

	.addAddress .list {
		background-color: #fff;
		padding: 0 24rpx;
		margin-top: 15px;
	}

	.addAddress .list .item {
		border-top: 1rpx solid #eee;
		height: 90rpx;
		line-height: 90rpx;
	}

	.addAddress .list .item .name {
		// width: 195rpx;
		font-size: 30rpx;
		color: #333;
	}

	.addAddress .list .item .address {
		flex: 1;
		margin-left: 50rpx;
	}

	.addAddress .list .item input {
		width: 475rpx;
		font-size: 30rpx;
		font-weight: 400;
	}

	.addAddress .list .item .placeholder {
		color: #ccc;
	}

	.addAddress .list .item picker .picker {
		width: 410rpx;
		font-size: 30rpx;
	}

	.addAddress .default {
		padding: 0 30rpx;
		height: 90rpx;
		background-color: #fff;
		margin-top: 23rpx;
	}

	.addAddress .default checkbox {
		margin-right: 15rpx;
	}

	.addAddress .keepBnt {
		width: 690rpx;
		height: 86rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 80rpx auto 24rpx auto;
		font-size: 32rpx;
		color: #fff;
	}

	.addAddress .wechatAddress {
		width: 690rpx;
		height: 86rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 0 auto;
		font-size: 32rpx;
		color: #E93323;
		border: 1px solid #E93323;
	}

	.relative {
		position: relative;
	}

	.icon-dizhi {
		font-size: 44rpx;
		z-index: 100;
	}

	.abs_right {
		position: absolute;
		right: 0;
	}
</style>